//自动滚点轮播图
(function() {
	function runImg() {}
	runImg.prototype = {
		bigbox: null, //最外层容器
		boxul: null, //子容器ul
		imglist: null, //子容器img
		numlist: null, //子容器countNum
		prov: 0, //上次显示项
		index: 0, //当前显示项
		timer: null, //控制图片转变效果
		play: null, //控制自动播放
		imgurl: [], //存放图片
		count: 0, //存放的个数
		$: function(obj) {
			if(typeof(obj) == "string") {
				if(obj.indexOf("#") >= 0) {
					obj = obj.replace("#", "");
					if(document.getElementById(obj)) {
						return document.getElementById(obj);
					} else {
						alert("没有容器" + obj);
						return null;
					}
				} else {
					return document.createElement(obj);
				}
			} else {
				return obj;
			}
		},
		//初始化
		info: function(id) {
			this.count = this.count <= 3 ? this.count : 3;
			this.bigbox = this.$(id);
			for(var i = 0; i < 2; i++) {
				var ul = this.$("ul");
				for(var j = 1; j <= this.count; j++) {
					var li = this.$("li");
					li.innerHTML = i == 0 ? this.imgurl[j - 1] : j;
					ul.appendChild(li);
				}
				this.bigbox.appendChild(ul);
			}
			this.boxul = this.bigbox.getElementsByTagName("ul");
			this.boxul[0].className = "imgList";
			this.boxul[1].className = "countNum";
			this.imglist = this.boxul[0].getElementsByTagName("li");
			this.numlist = this.boxul[1].getElementsByTagName("li");
			for(var j = 0; j < this.imglist.length; j++) {
				this.alpha(j, 0);
			}
			this.alpha(0, 100);
			this.numlist[0].className = "current";
		},
		//封装程序入口
		action: function(id) {
			this.autoplay();
			this.mouseoverout(this.bigbox, this.numlist);
		},
		//图片切换效果
		imgshow: function(num, numlist, imglist) {
			this.index = num;
			var pralpha = 100;
			var inalpha = 0;
			for(var i = 0; i < numlist.length; i++) {
				numlist[i].className = "";
			}
			numlist[this.index].className = "current";
			clearInterval(this.timer);
			for(var j = 0; j < this.imglist.length; j++) {
				this.alpha(j, 0);
			}
			this.alpha(this.prov, 100);
			this.alpha(this.index, 0);
			var $this = this;
			//利用透明度来实现切换图片
			this.timer = setInterval(function() {
				inalpha += 2;
				pralpha -= 2;
				if(inalpha > 100) {
					inalpha = 100
				}; //不能大于100
				if(pralpha < 0) {
					pralpha = 100
				};
				//为兼容性赋样式
				$this.alpha($this.prov, pralpha);
				$this.alpha($this.index, inalpha);
				if(inalpha == 100 && pralpha == 0) {
					clearInterval($this.timer)
				}; //当等于100的时候就切换完成了
			}, 20) //经测试20是最合适的值
		},
		//设置透明度
		alpha: function(i, opacity) {
			this.imglist[i].style.opacity = opacity / 100;
			this.imglist[i].style.filter = "alpha(opacity=" + opacity + ")";
		},
		//自动播放
		autoplay: function() {
			var $this = this;
			this.play = setInterval(function() {
				$this.prov = $this.index;
				$this.index++;
				if($this.index > $this.imglist.length - 1) {
					$this.index = 0
				};
				$this.imgshow($this.index, $this.numlist, $this.imglist);
			}, 3000)
		},
		//处理鼠标事件
		mouseoverout: function(box, numlist) {
			var $this = this;
			box.onmouseover = function() {
				clearInterval($this.play);
			}
			box.onmouseout = function() {
				$this.autoplay($this.index);
			}
			for(var i = 0; i < numlist.length; i++) {
				numlist[i].index = i;
				numlist[i].onmouseover = function() {
					$this.prov = $this.index;
					$this.imgshow(this.index, $this.numlist, $this.imglist);
				}
			}
		}
	}
	window.onload = function() {
		var runimg = new runImg();
		runimg.count = 3;
		runimg.imgurl = [
			"<img src=images/lunbo1.jpg />",
			"<img src=images/lunbo2.jpg />",
			"<img src=images/lunbo3.jpg />"
		];
		runimg.info("#box");
		runimg.action("#box");
//	};
//})();
//
//
////左右切换自动轮播图
///* 知识点： */
///* this用法 */
///* DOM事件 */
///* 定时器 */
//(function() {
//	window.onload = function() {
		var container = document.getElementById('container');
		var list = document.querySelector('.list');
		var prev = document.querySelector('.prev');
		var next = document.querySelector('.next');
		let index = 1;
		var timer;
		function animate(offset) {
			//获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
			//且style.left获取的是字符串，需要用parseInt()取整转化为数字。
			var newLeft = parseInt(list.style.left) + offset;
			list.style.left = newLeft + 'px';
			//无限滚动判断
			if(newLeft > -899) {
				list.style.left = -2697 + 'px';
			}
			if(newLeft < -2697) {
				list.style.left = -899 + 'px';
			}
		}
	
		function play() {
			//重复执行的定时器
			timer = setInterval(function() {
				next.onclick();
			}, 3000);
		}
	
		function stop() {
			clearInterval(timer);
		}
	
		prev.onclick = function() {
			index -= 1;
			if(index < 1) {
				index = 3
			}
			animate(899);
		};
		next.onclick = function() {
			//由于上边定时器的作用，index会一直递增下去，所以需要做出判断
			index += 1;
			if(index > 3) {
				index = 1
			}
			animate(-899);
		};
		container.onmouseover = stop;
		container.onmouseout = play;
		play();
	};
})();